<template>
  <div>
        <div>
<el-row :gutter="15">
  <el-col :span="8"><div class="grid-content">
        <el-input placeholder="输入关键字"
                  v-model="input"
                  >
        </el-input></div>
    </el-col>
  <el-col :span="2"><div class="grid-content ">
      <el-button class="check">查询</el-button></div>
    </el-col>
  <el-col :span="12"><div class="grid-content "></div></el-col>
  <el-col :span="2"><div class="grid-content ">
      <el-button class="new" @click="createNew">新建</el-button></div></el-col>
</el-row>
    </div>
      <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="tableData"
                with
                style="width: 100%">
        <el-table-column prop="orgId"
                         label="序号"
                         >
            <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="linkman"
                         label="用户名称"
                         >
        </el-table-column>
        <el-table-column prop="name"
                         label="所属机构"
                         >
        </el-table-column>
         <el-table-column prop="contactNumber"
                         label="手机号"
                         >
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间"
                         >
        </el-table-column>
         <el-table-column prop="status"
                         label="状态"
                         >
             <template slot-scope="scope">
              <span v-if="scope.row.status != '冻结'" style="color:#32A1C8">{{scope.row.status}}</span>
              <span v-else style="color:#606972">{{scope.row.status}}</span>
          </template>

        </el-table-column>
        <el-table-column label="操作"
                         width="180">
            <template slot-scope="scope">
                <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                <el-button type="text"  @click="dialogVisibleEdit= true">编辑</el-button>
                <el-button type="text" @click="handleLook(scope.row)">查看</el-button>
            </template>
        </el-table-column>
      </el-table>
      <!--新建对话框-->
      <el-dialog custom-class="self-dialog"
               title="新建"
               :visible.sync="dialogVisibleNew"
               width="30%"
               modal>
      <el-form :model="formNew"
               :rules="rules"
               ref="formNew"
               label-width="100px">
          <el-form-item label="用户id"
                        prop="uid">
              <el-input v-model="formNew.uid"
                        placeholder="单行输入"></el-input>
          </el-form-item>
        <el-form-item label="用户名称"
                      prop="userName">
          <el-input v-model="formNew.name"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="所属机构"
                      prop="affiliation">
            <el-select v-model="formNew.organization.orgId" placeholder="选择机构">
                <el-option :label="item.name" :value="item.orgId" v-for="(item) in orgAll" :key="item.orgIdd"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="手机号"
                      prop="mobile">
          <el-input v-model="formNew.telephone"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="状态"
                      prop="status">
            <el-select v-model="formNew.status" placeholder="选择机构">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-button @click="clickReset;dialogVisibleNew=false"
                   plain>取 消</el-button>
        <el-button @click="clickAddConfirm"
                   plain>确 定</el-button>

      </el-form>

    </el-dialog>
    <!-- 新建对话框 -->

     <!--编辑对话框-->
      <el-dialog custom-class="self-dialog"
               title="编辑"
               :visible.sync="dialogVisibleEdit"
               width="30%"
               modal>
      <el-form :model="formEdit"
               :rules="rules"
               ref="formEdit"
               label-width="100px">
        <el-form-item label="用户名称"
                      prop="userName">
          <el-input v-model="formEdit.userName"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="所属机构"
                      prop="affiliation">
          <el-input v-model="formEdit.affiliation"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="手机号"
                      prop="mobile">
          <el-input v-model="formEdit.mobile"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="状态"
                      prop="status">
          <el-input v-model="formEdit.status"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-button @click="clickReset('formEdit');dialogVisibleEdit=false"
                   plain>取 消</el-button>
        <el-button @click="clickAddConfirm(formEdit);dialogVisibleEdit=false"
                   plain>确 定</el-button>

      </el-form>

    </el-dialog>
    <!-- 编辑对话框 -->

     <!--查看对话框-->
      <el-dialog custom-class="self-dialog"
               title="查看"
               :visible.sync="dialogVisibleCheck"
               width="30%"
               modal>
      <el-form :model="formCheck"
               :rules="rules"
               ref="formCheck"
               label-width="100px">
        <el-form-item label="用户名称"
                      prop="userName">
          <el-input v-model="formCheck.linkman"
                    placeholder="单行输入" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属机构"
                      prop="affiliation">
          <el-input v-model="formCheck.name"
                    placeholder="单行输入" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号"
                      prop="mobile">
          <el-input v-model="formCheck.contactNumber"
                    placeholder="单行输入" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间"
                      prop="createDate">
          <el-input v-model="formCheck.createTime"
                    placeholder="单行输入" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态"
                      prop="status">
          <el-input v-model="formCheck.status"
                    placeholder="单行输入" disabled></el-input>
        </el-form-item>
        <el-button @click="clickReset('formCheck');dialogVisibleCheck=false"
                   plain>取 消</el-button>
      </el-form>

    </el-dialog>
    <!-- 查看对话框 -->
  </div>
</template>
<script>
    import changeDate from "../../assets/js/changeDate";
export default {
  data () {
    return {
      dialogVisibleNew: false,
      dialogVisibleEdit: false,
      dialogVisibleCheck: false,
      orgAll:[{
          name:'柳江区教育局',
          orgId:'1'
        }],
      formNew: {
          uid: '',
        name: '张三',
        organization: {
            orgId: ''
        },
        telephone: '15862354265',
        status: ''
      },
      formEdit: {
        userName: '张三',
        affiliation: '柳北区教育局',
        mobile: '15862354265',
        status: '启用'
      },
      formCheck: {
          linkman: '张三',
          name: '柳北区教育局',
          contactNumber: '15862354265',
          createTime: '2020-05-09 16:57:21',
          status: '启用'
      },
      tableData: [
        {
            orgId: '1',
            linkman: '张三',
            name: '柳北区教育局',
            contactNumber: '15862354265',
            createTime: '2020-05-09 16:57:21',
            status: '启用'
        },
      ],
      input: '',
      rules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }

        ],
        affiliation: [
          { required: true, message: '请输入所属机构', trigger: 'blur' },
          { min: 2, max: 11, message: '长度为2-11个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }

        ],
        status: [
          { required: true, message: '请输入机构状态', trigger: 'blur' }

        ]

      }
    }
  },
    mounted() {
      this.getUserFindAll()
    },
    // 初始化显示
  created () {

  },
  methods: {
      getUserFindAll() {
          this.$Http.userFinAll().then(res=>{
              console.log(res)
              let data = res.data
              this.tableData = data.data.map(item=>{
                  console.log(item.createTime)
                  let createTime = changeDate(item.createTime)
                  return {
                      uid: item.uid,
                      linkman: item.name,
                      name: item.organization.name,
                      status: item.status,
                      createTime: createTime,
                      contactNumber:item.telephone
                  }
              })
          })
      }, //获取所有的人员
      getOrgFindAll() {
          this.$Http.orgFindAll().then(res=>{
              let data = res.data
              this.orgAll =  data.data.map(item=>{
                  return {
                      name: item.name,
                      orgId: item.orgId
                  }
              })
          })
      },//获取所有机构
      handleDelete(row) {
          let uid = row.uid
          console.log(uid)
          this.$confirm('此操作将任务状态改为删除状态, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              //点击确定的操作(调用接口)
          }).catch(() => {
              //几点取消的提示
          });
      },    //点击删除按钮
    clickCheck () {

    },
    createNew() {  //点击新建按钮
        this.dialogVisibleNew = true
        this.getOrgFindAll()
    },
    clickAddConfirm () {
        if(this.formNew.name !== ""&&
            this.formNew.telephone !== ""&&
            this.formNew.organization.orgId !== ""&&
            this.formNew.status !== ""){
            let test = /^[0-9a-zA-Z]+$/
            if(!test.test(this.formNew.uid)){
                this.$message.warning("用户id只能有数字，字母")
            }else{
                this.$Http.userAdd(this.formNew).then(res=>{
                    console.log(res)
                })
            }
        }else {
            this.$message.warning("请填完所有表单")
        }
    },// 添加用户

    clickEdit () {


    },// 编辑机构信息

    clickEditConfirm (form) {
      console.log(form)
      const _this = this
      this.$axios.post('/user/update',
        // 法1：
        form
        /* 法2：
        {
          userName: form.userName,
          mobile: form.mobile,
           affiliation: form.mobileaffiliation,
            status: form.status,
        })
        法2 */
      ).then(function (resp) {
        console.log(resp)
        _this.init()
      })
    },// 编辑表单里的确定按钮

    handleLook(row) {
        this.dialogVisibleCheck= true
        this.formCheck = row
    }
  }

}
</script>
<style scoped>
 #inputCheck{
 .el-input__inner {
  margin: 0;
  padding: 0;
  width: 400px;
}
.el-input--suffix ,.el-input__inner {
    padding-right: 0px;
}
.el-input ,.el-input--suffix {
    margin:0;
    width: 40%;
    float:left;
    position: relative;
}
.input_{
    position: relative;
    left:0px;

}
}

.el-table th.is-leaf {
  /* 去除上边框 */
  border: none;
}
.el-table::before {
  /* 去除下边框 */
  height: 0;
}
.el-table__row > td {
  /* 去除表格线 */
  border: none;
}
.el-table td,
.el-table th {
  text-align: center!important;
}
html,body{
    margin:0;
    padding:0;
}
.check{
    float: left;
    position: relative;
}
.new{
    float: right;
    position: relative;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
